import React from "react";
import {Button,Alert, StyleSheet, TouchableOpacity, View, FlatList,Image} from 'react-native';
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
  import {
    BottomNavigation,
    BottomNavigationTab,
    Layout,
    Text,
  } from "@ui-kitten/components";
import { MaterialIcons } from "@expo/vector-icons";
import App from '../shop/shoppage';


// screens
// import AccountScreen from "../screens/Account";

const HomeScreen = (props) => {
  
  return (
    <Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" ,backgroundColor:'green'}}>
      <Text>Home Screen</Text>
    </Layout>
  );
};

const HomeStack = createNativeStackNavigator();

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: false,
      }}
    >
      <HomeStack.Screen name="Home" component={HomeScreen} />
    </HomeStack.Navigator>
  );
};

const AccountScreen = (props) => {
  return (
    <Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Account Screen</Text>
      <Image source={require('../pic/树3末.png')}/>
    </Layout>
  );
};

const AccountStack = createNativeStackNavigator();

const AccountStackScreen = () => {
  return (
    <AccountStack.Navigator
      initialRouteName="Account"
      screenOptions={{
        headerShown: false,
      }}
    >
      <AccountStack.Group>
        <AccountStack.Screen name="Account" component={AccountScreen} />
      </AccountStack.Group>
    </AccountStack.Navigator>
  );
};




const BottomTabBar = ({ navigation, state }) => (
  <BottomNavigation
    selectedIndex={state.index}
    appearance="noIndicator"
    onSelect={(index) => navigation.navigate(state.routeNames[index])}
  >
    <BottomNavigationTab
      title="Home"
      icon={(props) => (
        <MaterialIcons
          name="home"
          size={24}
          color={props.style.tintColor}
        />
      )}
    />
    <BottomNavigationTab
      title="Shop"
      icon={(props) => (
        <MaterialIcons
          name="shop"
          size={24}
          color={props.style.tintColor}
        />
      )}
    />
    <BottomNavigationTab
      title="Account"
      icon={(props) => (
        <MaterialIcons
          name="account-circle"
          size={24}
          color={props.style.tintColor}
        />
      )}
    />
  </BottomNavigation>
);




const TabNavigator = createBottomTabNavigator();


export default class TabNavigatorScreen extends React.Component{

  render() {
    return (
      <TabNavigator.Navigator tabBar={(props) => <BottomTabBar {...props} />}>
        <TabNavigator.Screen name="HomeScreen" component={HomeStackScreen} />
        <TabNavigator.Screen name="Shop" component={App} />
        <TabNavigator.Screen
          name="AccountScreen"
          component={AccountStackScreen}
        />
      </TabNavigator.Navigator>
    );
  } 
};

// export default TabNavigatorScreen;

